<template>
  <button @click="handleSubmit">搜索</button>
  <div class="wrapper">
    <div v-for="item in dic" :key="item" class="item" @click="() => handleClick(item)">{{ item }}</div>
  </div>
  <div class="table">
    <div v-for="item in columns" :key="item.key" class="table-item">{{ item.title }}</div>
  </div>
  <a-table ref="tableRef" :columns="columns" :data-source="data"></a-table>
  <a-button @click="handleSubmit">点击我</a-button>
</template>
<!-- <script>
export default {
  data() {
    return {
      name: '',
    };
  },
  methods: {
    handleClick() {
      this.name;
    },
  },
};
</script> -->

<script setup>
const name = ref('');
const dic = ['畜牧品种', '牲畜类型', '王五'];
const data = ref([
  { name: '张三', age: 17 },
  { name: '李四', age: 20 },
  { name: '王五', age: 22 },
]);
const tableRef = ref(null);
console.log('setup中的tableRef', tableRef.value);
onBeforeMount(() => {
  console.log('onBeforeMount中的wrapper', document.querySelectorAll('.wrapper'));
});
onMounted(() => {
  console.log('组件挂载完成！！！');
  console.log('onMounted中的wrapper', document.querySelectorAll('.wrapper'));
  console.log('onMounted中的tableRef', tableRef.value);
});
console.log('setup中的wrapper', document.querySelectorAll('.wrapper'));

const timer = setInterval(() => {
  console.log(111);
}, 1000);

onUnmounted(() => {
  clearInterval(timer);
});
// const columns = ref([
//   {
//     title: name,
//     key: 'name',
//     dataIndex: 'name',
//   },
//   { title: '年龄', key: 'age', dataIndex: 'age' },
// ]);
// const columns = [
//   {
//     title: () => {
//       return name.value;
//     },
//     key: 'name',
//     dataIndex: 'name',
//   },
//   { title: '年龄', key: 'age', dataIndex: 'age' },
// ];

const columns = computed(() => {
  return [
    {
      title: name.value,
      key: 'name',
      dataIndex: 'name',
    },
    { title: '年龄', key: 'age', dataIndex: 'age' },
  ];
});
const handleSubmit = () => {
  data.value = [
    { name: '张三', age: 18 },
    { name: '李四', age: 20 },
    { name: '王五', age: 22 },
  ];
};
const handleClick = (item) => {
  name.value = item;
};
</script>

<style scoped lang="less">
.item {
  color: red;
}

.table {
  display: flex;
  // justify-content: ;

  .table-item {
    font-size: 24px;
  }
}
</style>
